<template>
  <div class="container">
    <div class="reminder">
      <i class="el-icon-warning"></i>
      <span>说明：同一类型的问题，请勿重复提交！</span>
    </div>
    <el-form
      :model="helpFrom"
      :rules="helpFromRules"
      ref="helpFrom"
      class="helpFrom"
      label-width="120px"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="项目名称：" prop="projectId">
            <el-select
              v-model="helpFrom.projectId"
              placeholder="请选择项目名称"
              class="optionWidth"
              clearable
              filterable
            >
              <el-option
                v-for="(item, index) of projectListOptions"
                :key="index"
                :label="item.projectName"
                :value="item.projectId"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="反馈人姓名：" prop="reporter">
            <el-input
              maxlength="64"
              v-model="helpFrom.reporter"
              autocomplete="off"
              placeholder="请输入姓名"
              class="inputWidth"
              @blur="helpFrom.reporter = changeValue($event)"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="反馈人电话：" prop="tel">
            <el-input
              maxlength="64"
              v-model="helpFrom.tel"
              autocomplete="off"
              placeholder="请输入电话"
              class="inputWidth"
              @blur="helpFrom.tel = changeValue($event)"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="问题类型：" prop="feedbackType">
            <el-select
              v-model="helpFrom.feedbackType"
              placeholder="请选择问题类型"
              class="optionWidth"
              clearable
              filterable
            >
              <el-option
                v-for="(item, index) of problemTypeList"
                :key="index"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="紧急程度：" prop="anxiousType">
            <el-select
              v-model="helpFrom.anxiousType"
              placeholder="请选择紧急程度"
              class="optionWidth"
              clearable
              filterable
            >
              <el-option
                v-for="(item, index) of urgentDegreeList"
                :key="index"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            :label="'详情描述及\n说明：'"
            prop="description"
            class="wordWrapItem"
          >
            <el-input
              type="textarea"
              v-model.trim="helpFrom.description"
              autocomplete="off"
              clearable
              placeholder="请输入问题详情描述及说明"
              maxlength="500"
              show-word-limit
              rows="3"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="附件：" class="agreementBox">
            <uploadAnnex
              style="width: 610px"
              @getFileList="getFileListAgr"
              :limitationFactor="limitationFactorAgr"
              @getFile="getFileAgr"
              :upLoadFile="files"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <uploadResult
            style="margin-left: 120px !important"
            :resultList="files"
            @callBackResult="getFileAgr"
          />
        </el-col>
      </el-row>
      <div class="describeBox">
        <p class="describeTit">详情描述填写示例：</p>
        <ul class="describeCon">
          <li>
            (1)
            硬件运行问题：本周考勤部分人员考勤数据缺失，缺失考勤人员有xxx人员，部分设备无法识别，设备型号为xx型。
          </li>
          <li>
            (2)
            工资和专户及保证金问题：因为xxx原因，xxxx年xx月xx批次的工资表需要撤销。
          </li>
          <li>
            (3)
            数据异常问题：人员姓名：xxx，身份证号：xxxxxxxxxxxxxxxxxx，因为xxx填写错误，需要修改为xxxx。
          </li>
        </ul>
      </div>
    </el-form>
  </div>
</template>
<script>
export default {
  name: 'helpAdd',
  data() {
    return {
      projectListOptions: [],
      helpFrom: {
        projectId: '',
        tel: '',
        reporter: '',
        feedbackType: '',
        anxiousType: '',
        description: '',
      },
      oldAgrSrcList: [],
      agrSrcList: [],
      problemTypeList: [],
      urgentDegreeList: [],
      limitationFactorAgr: {
        uploadAnnexUrl: 'api-f/files/upload', //自定义上传文件接口地址
        upLoadFileLength: 10, //自定义上传文件最大数量设置
        fileSize: 5, //自定义上传文件最大设置
        formatType: 'typeFour', //自定义上传格式校验类型
        messagetip:
          '要求格式为png，jpg，jpeg，doc，docx，xls，xlsx，pdf格式，附件大小不超过5M”', //自定义报错提示语
        fileId: 'salaryExcelAgr', //自定义id解决一个页面包含多个上传附件
        uploadFormId: 'ExcelAgreement', //自定义id解决一个页面包含多个上传附件
        methodTip:
          '请上传附件，附件格式支持png，jpg，jpeg，doc，docx，xls，xlsx，pdf，最多上传10个附件', //自定义上传文件提示
        uploadBtnType: 'typeOne', //自定义上传按钮类型
        messageFileSizetip: '最多能上传5M以内的附件',
      },
      helpFromRules: {
        tel: [
          {
            required: true,
            pattern: /^1[3456789]\d{9}$/,
            message: '请输入正确的手机号',
            trigger: 'blur',
          },
        ],
        reporter: [
          {
            required: true,
            message: '姓名不能为空',
            trigger: 'blur',
          },
        ],
        feedbackType: [
          {
            required: true,
            message: '问题类型不能为空',
            trigger: 'change',
          },
        ],
        projectId: [
          {
            required: true,
            message: '项目名称不能为空',
            trigger: 'change',
          },
        ],
        description: [
          {
            required: true,
            message: '问题详情描述及说明不能为空',
            trigger: 'blur',
          },
        ],
      },
      files: [],
    }
  },
  created() {
    this.getProjectList()
    this.getUrgentDegree()
    this.getProblemType()
  },
  methods: {
    // 项目名称
    getProjectList() {
      this.axios({
        method: 'post',
        url: 'api-m/userpro/current',
      })
        .then((response) => {
          this.projectListOptions = response.data.result.projects
        })
        .catch((error) => {
          this.$message.error('数据获取失败')
        })
    },
    getUrgentDegree() {
      this.axios({
        method: 'post',
        url: 'api-m/base/dicitem/findbytype',
        data: { type: 'ANXIOUS_TYPE' },
      })
        .then((response) => {
          this.urgentDegreeList = response.data.result
        })
        .catch((error) => {
          this.$message.error('数据获取失败')
        })
    },
    getProblemType() {
      this.axios({
        method: 'post',
        url: 'api-m/base/dicitem/findbytype',
        data: { type: 'FEEDBACK_TYPE' },
      })
        .then((response) => {
          this.problemTypeList = response.data.result
        })
        .catch((error) => {
          this.$message.error('数据获取失败')
        })
    },
    getFileListAgr(val) {
      this.oldAgrSrcList.push(val)
      this.agrSrcList.push(val)
    },
    getFileAgr(val) {
      this.files = val
    },
    // 父组件传递过来的方法：取消
    cancel() {
      this.$refs['helpFrom'].resetFields()
    },
    // 父组件传递过来的方法：保存
    save() {
      this.$refs['helpFrom'].validate((valid) => {
        if (valid) {
          this.helpFrom.files = this.getImg()
          this.axios({
            method: 'post',
            url: 'api-m/feedback/add',
            data: this.helpFrom,
          })
            .then((response) => {
              if (!response.data.hasError) {
                this.$message({
                  type: 'success',
                  message: '添加成功',
                })
                this.files = []
                this.helpFrom.files = ''
                this.$emit('cancelAdd', 'success')
              } else {
                this.$message({
                  type: 'error',
                  message: response.data.errorMsg,
                })
              }
            })
            .catch((error) => {})
        } else {
          return false
        }
      })
    },
    getImg() {
      const fileArray = new Array()
      for (var j = 0; j < this.files.length; j++) {
        var str = this.files[j].path
        var index = str.lastIndexOf('\/')
        str = str.substring(index + 1, str.length)
        fileArray[j] = {
          originalName: this.files[j].name,
          newName: str,
          fileSize: this.files[j].size,
          fileType: this.files[j].contentType,
          relativePath: this.files[j].path,
        }
      }
      return JSON.stringify(fileArray)
    },
  },
}
</script>

<style scoped lang="less">
.download {
  position: absolute;
  right: 30px;
  top: 0;
}
.agreementBox {
  /deep/label {
    line-height: 20px;
  }
}

.optionWidth,
.inputWidth {
  width: 300px !important;
}

/deep/ .el-dialog__body {
  padding: 0;
}

.el-dialog__footer {
  height: 66px;
  padding: 15px 20px;
}
.el-dialog__footer button {
  height: 36px !important;
}
.previewImg {
  position: absolute;
  top: 0;
  left: 0;
  right: 30px;
  cursor: pointer;
  /deep/.el-image__preview {
    opacity: 0;
  }
}
.reminder {
  color: #666;
  font-size: 14px;
  background: #fffbe6;
  line-height: 36px;
  border-radius: 3px;
  padding: 0 20px;
  // position: fixed;
  // width: 900px;
  // z-index:10;
  i {
    color: #ffaa00;
    margin-right: 4px;
    font-size: 20px;
    vertical-align: -2px;
  }
  span {
    color: #ff4d4a;
  }
}
.helpFrom {
  padding: 24px 16px;
}
.describeBox {
  padding: 16px;
  background: #f7f7f7;
}
.describeTit {
  font-size: 14px;
  color: #333;
  width: 135px;
  text-align: right;
  font-weight: 700;
  margin-bottom: 12px;
}
.describeCon {
  li {
    color: #666;
    margin-left: 10px;
    line-height: 24px;
    margin-bottom: 8px;
  }
}
</style>
